<template>
  <el-dialog v-model="dialogVisible" title="指定审核人" width="30%">
    <!-- 第二步，填写表单，进行流程的提交 -->
    <ContentWrap>
      <el-form
        :model="startUserSelectAssignees"
        :rules="startUserSelectAssigneesFormRules"
        ref="startUserSelectAssigneesFormRef"
      >
        <el-form-item
          v-for="userTask in startUserSelectTasks"
          :key="userTask.id"
          :label="`任务【${userTask.name}】`"
          :prop="userTask.id"
        >
          <el-select
            v-model="startUserSelectAssignees[userTask.id]"
            multiple
            filterable
            placeholder="请选择审批人"
          >
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.nickname"
              :value="user.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <template #footer>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import * as DefinitionApi from '@/api/bpm/definition'
import * as UserApi from '@/api/system/user'
const prop = defineProps({
  auditid: {
    type: String,
    default: ''
  }
})
const dialogVisible = ref(false) // 是否显示弹窗
const open = async () => {
  dialogVisible.value = true
  await handleSelect()
}
defineExpose({ open })
// 指定审批人
const bpmnXML = ref(null) // BPMN 数据
const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
const userList = ref<any[]>([]) // 用户列表

/** 处理选择流程的按钮操作 **/
const handleSelect = async () => {
  // 重置指定审批人
  startUserSelectTasks.value = []
  startUserSelectAssignees.value = {}
  startUserSelectAssigneesFormRules.value = {}
  // 设置表单
  // setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
  // 加载流程图
  const processDefinitionDetail = await DefinitionApi.getProcessDefinitionApi(
    prop.auditid
  )
  if (processDefinitionDetail) {
    bpmnXML.value = processDefinitionDetail.bpmnXml
    startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks

    // 设置指定审批人
    if (startUserSelectTasks.value?.length > 0) {

      // 设置校验规则
      for (const userTask of startUserSelectTasks.value) {
        startUserSelectAssignees.value[userTask.id] = []
        startUserSelectAssigneesFormRules.value[userTask.id] = [
          { required: true, message: '请选择审批人', trigger: 'blur' }
        ]
      }
      // 加载用户列表
      userList.value = await UserApi.getSimpleUserList()
    }
  }
}
const emits = defineEmits(['selectAssignees'])
/** 提交按钮 */
const submitForm = async () => {

  // 如果有指定审批人，需要校验
  if (startUserSelectTasks.value?.length > 0) {
    await startUserSelectAssigneesFormRef.value.validate()
  }
  console.log(startUserSelectAssignees.value)
  emits('selectAssignees', startUserSelectAssignees.value)
  dialogVisible.value = false
}
</script>
